<template>
    <div class="userinfo">
        <template v-if="!userinfo">
            <i class="el-icon-user avatar-placeholder"></i>
            <h3>admin</h3>
        </template>
        <template v-else>
            <img class="avatar" :src="userinfo.avatar" alt="Avatar"/>
            <h3>{{ userinfo.username }}</h3>
        </template>
    </div>
</template>

<script>
import {defineComponent} from 'vue'
import {useUserinfo} from './hooks/useUserinfo'

export default defineComponent({
    setup() {
        const {userinfo} = useUserinfo()
        return {userinfo}
    },
})
</script>
<style lang="scss" scoped>
.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;

    i {
        font-size: 48px;
        color: $mainColor;
    }

    h3 {
        font-size: 14px;
        font-weight: normal;
        margin: 8px 0;
    }

    .avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
    }
}
</style>
